<template>
  <div>
    <el-card>
      <el-form class="pageQuery" label-position="top">
        <div class="queryItem" v-for="(queryItem, index) in queryItem" :key="index">
          <el-form-item :label="queryItem.label">
            <el-input v-if="queryItem.inputType == 'input'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]"></el-input>

            <el-select v-if="queryItem.inputType == 'select'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]">
              <el-option v-for="(item, index) in  option[queryItem.option]" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="getListData">条件搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表内容 -->
    <el-card class="content">
      <div class="tableHeader">
        <el-button type="success" @click="add_box.show = true" v-if="$api.buttonPower(60)">套餐组添加</el-button>
      </div>

      <el-table :data="listData" v-loading="loading">
        <el-table-column v-for="(tableItem, index) in tableItem" :key="index" :label="tableItem.label"
          :prop="tableItem.prop">
          <template slot-scope="scope">
            <div v-html="$api.status.status(scope.row.status, option[$api.Enum.DicTypeStatus])"
              v-if="tableItem.prop == 'status'"></div>
            <div v-else>{{ scope.row[tableItem.prop] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-link type="primary" v-if="$api.buttonPower(61)" @click="detailOpen(scope.row)" class="routeButton">查看</el-link>
          </template>
        </el-table-column>
        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>
      <!-- 分页 -->
      <myPaging :queryInfo="queryInfo" :getListData="getListData"></myPaging>
    </el-card>

    <el-drawer title="套餐组详情" :visible.sync="detail_box.show" size="50%">
      <iot-combo-group-detail v-if="detail_box.show" :data_id="detail_box.id" @close="detailClose"></iot-combo-group-detail>
    </el-drawer>
    <el-drawer title="套餐组添加" :visible.sync="add_box.show" direction="rtl" size="80%" :wrapperClosable="false" append-to-body>
      <iot-combo-group-set v-if="add_box.show" @close="addClose"></iot-combo-group-set>
    </el-drawer>
  </div>
</template>

<script>
import IotComboGroupSet from "@/components/iotCard/combo/addComboGroup";
import IotComboGroupDetail from "@/components/iotCard/combo/comboGroupDetail";
export default {
  components: {IotComboGroupDetail, IotComboGroupSet},
  data() {
    return {
      listData: [],
      queryInfo: {
        total: 0,
        size: 10,
        page: 1
      },
      option: [],
      queryItem: [
        {
          inputType: 'select',
          model: 'agent_app_id',
          placeholder: '请选择应用商',
          label: '所属应用商',
          option: this.$api.Enum.DicTypeResellerList
        },
        {
          inputType: 'input',
          model: 'title',
          placeholder: '请输入套餐组名称',
          label: '套餐组名称'
        },
        {
          inputType: 'select',
          model: 'status',
          placeholder: '请选择状态',
          label: '状态',
          option: this.$api.Enum.DicTypeStatus
        },
      ],
      tableItem: [
        {
          label: '应用商编号',
          prop: 'agent_app_id'
        },
        {
          label: '应用商名称',
          prop: 'agent_app_name'
        },
        {
          label: '套餐组名称',
          prop: 'title'
        },
        {
          label: '流量类型',
          prop: 'flow_type_name'
        },
        {
          label: '状态',
          prop: 'status',
        },
      ],
      add_box:{
        show: false,
      },
      detail_box:{
        show: false,
        id: 0,
      },
      loading: false,
    };
  },
  mounted() {
    this.getListData();
    this.$api.foundation.dicListExtendCache([
      this.$api.Enum.DicTypeResellerList,
      this.$api.Enum.DicTypeStatus,
    ], '', res => {
      this.option = res
    })
    this.$api.power(this.queryItem, this.tableItem, res => {
      this.queryItem = res.queryItem
      this.tableItem = res.tableItem
    })
  },
  methods: {
    getListData() {
      this.loading = true
      this.$api.combo.groupList(this.queryInfo, res => {
        if (res.status) {
          this.listData = res.data.list;
          this.queryInfo.total = res.data.page.total;
          this.loading = false
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize;
      this.getListData();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getListData();
    },
    detailOpen(row) {
      this.detail_box.show = true
      this.detail_box.id = row.id
    },
    detailClose(){
      this.detail_box.show = false
      this.detail_box.id = 0
      this.getListData();
    },

    addClose(){
      this.add_box.show = false
      this.getListData()
    },
  }
};
</script>

<style lang="less" scoped>
.content {
  margin-top: 20px;
}



</style>

